<template>
  <el-form :model="formData" ref="vForm" :rules="rules" label-position="right" label-width="80px" size="default"
    @submit.prevent>
    <el-form-item :label="isCh ? '姓名' : 'name'" prop="name" class="required">
      <el-input v-model="formData.name" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item :label="isCh ? '公司名称' : 'company'" prop="company" class="required">
      <el-input v-model="formData.company" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item :label="isCh ? '职位' : 'job'" prop="job" class="required">
      <el-input v-model="formData.job" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item :label="isCh ? '邮箱' : 'email'" prop="email" class="required">
      <el-input v-model="formData.email" type="text" clearable></el-input>
    </el-form-item>
    <el-form-item :label="isCh ? '类型' : 'type'" prop="type" class="required">
      <el-select v-model="formData.type" class="full-width-input" clearable placeholder="--请选择--">
        <el-option v-for="(item, index) in typeOptions" :key="index" :label="item" :value="item"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="isCh ? '内容' : 'content'" prop="content" class="required">
      <el-input type="textarea" v-model="formData.content" rows="3"></el-input>
    </el-form-item>
    <el-form-item>
      <div style="float: left;margin-top: 20px;margin-right: 20px">
        <el-button @click="submitForm" class="bg-orange" type="warning">{{isCh ? '提交' : 'Submit'}}</el-button>
        <el-button @click="handleCancel">{{isCh ? '重置' : 'Reset'}}</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
import {
  defineComponent,
  toRefs,
  reactive,
  getCurrentInstance,
  computed
}
  from 'vue'
import { ElMessage } from 'element-plus'
import urls from '@/api/index'
export default defineComponent({
  components: {},
  props: {
    lang: String
  },
  setup (props, ctx) {
    const state = reactive({
      formData: {
        name: '',
        company: '',
        job: '',
        email: '',
        type: '',
        content: ''
      },
      rules: {
        name: [{
          required: true,
          message: '字段值不可为空'
        }],
        company: [{
          required: true,
          message: '字段值不可为空'
        }],
        job: [{
          required: true,
          message: '字段值不可为空'
        }],
        email: [{
          required: true,
          message: '字段值不可为空'
        },
        {
          pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
          trigger: ['blur', 'change'],
          message: '请输入正确的邮箱！'
        }],
        type: [{
          required: true,
          message: '字段值不可为空'
        }],
        content: [{
          required: true,
          message: '字段值不可为空'
        }]
      }
    })
    const isCh = computed(() => props.lang === 'zh_CN')
    const typeOptions = computed(() => {
      return isCh.value ? ['国内媒体', '港澳台媒体', '驻华或海外媒体', '分析师', '机构投资者', '个人投资者', '个人股东'] : ['Local Media', 'HongKong/Macao/Taiwan media', 'Media in China or overseas', 'Analyst', 'Institutional Investor', 'Individual Investors', 'Individual Shareholders']
    })
    const { proxy } = getCurrentInstance()
    const submitForm = () => {
      proxy.$refs.vForm.validate(valid => {
        if (!valid) return
        urls.concat.submitCoop(state.formData)
          .then((res) => {
            ElMessage.success('提交成功！')
            resetForm()
          })
          .catch((err) => {
            ElMessage.error(err.msg)
          })
      })
    }
    const resetForm = () => {
      proxy.$refs.vForm.resetFields()
    }
    const handleCancel = () => {
      resetForm()
      // ctx.emit('close')
    }
    return {
      ...toRefs(state),
      submitForm,
      handleCancel,
      resetForm,
      isCh,
      typeOptions
    }
  }
})

</script>

<style lang="scss">
.el-select.full-width-input,
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>
